import React, { useState } from 'react';
import 'slick-carousel/slick/slick.css';
import Slider from 'react-slick';
import Image from 'next/image';
import './BannerCarousel.scss';
import SvgIcon from '@/components/SvgIcon';
import Link from 'next/link';
import useMounted from '@/hooks/useMounted';
import { useHttp } from '@/hooks';
import { useBreakpoints } from '@/hooks/useBreakpoints';

// const banners = [
//   {
//     title: 'Last Minute Deals',
//     target: '_self' as const,
//     url: 'https://www.my-company.net.cn/promotion-event-father-s-day-deals.html',
//     filename:
//       'https://cdn.my-company.net.cn/media/catalog/sliderimages/DSZ-20240829_Promo_LastMinute.jpg',
//     content:
//       '<p><img src="http://www.my-company.net.cn/media/wysiwyg/20140205-banner.jpg" alt=""></p>',
//   },
//   {
//     title: 'Sell on my-company',
//     target: '_self' as const,
//     url: 'https://web.my-company.net.cn/sell?utm_source=homepage&amp;utm_medium=banner&amp;utm_campaign=scale_banner&amp;utm_id=scalebanner2024',
//     filename:
//       'https://cdn.my-company.net.cn/media/catalog/sliderimages/DSZ-SignUp-Banner-2_rebrand.jpg',
//     content: '<p>content of slider</p>',
//   },
// ] as Banner[];

type Props = {
  banners: Banner[];
};

function BannerCarousel({ banners }: Props) {
  const [bannerList, setBannerList] = useState<Banner[]>(banners);

  const { http } = useHttp();

  // useMounted(async () => {
  //   const res = await http.get<Banner[]>('/public/banners');
  //   if (res?.success) {
  //     setBannerList(res.data);
  //   }
  // });

  // @ts-ignore
  const SlickArrowRight = ({ currentSlide, slideCount, ...props }) => (
    <span {...props}>
      <SvgIcon name="nav-right" width={40} height={60} color="#8f908f" />
    </span>
  );

  // @ts-ignore
  const SlickArrowLeft = ({ currentSlide, slideCount, ...props }) => (
    <span {...props}>
      <SvgIcon name="nav-left" width={40} height={60} color="#8f908f" />
    </span>
  );

  const settings = {
    dots: true,
    infinite: true,
    speed: 1200,
    fade: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    easing: 'ease-in-out',
    autoplay: true,
    touchThreshold: 30,
    autoplaySpeed: 8000,
    pauseOnHover: true,
    arrows: true,
    appendDots: (dots: any) => {
      return <ul>{dots}</ul>;
    },
    customPaging: function (i: number) {
      return <span className="dot"></span>;
    },
    // @ts-ignore
    nextArrow: <SlickArrowRight />,
    // @ts-ignore
    prevArrow: <SlickArrowLeft />,
  };

  // const breakpoints = useBreakpoints();

  return (
    <div className="banner-carousel main-width">
      <Slider {...settings}>
        {bannerList.length &&
          bannerList.map((item, index) => (
            <div key={index} className="slider-item">
              <Link href={item.url} target={item.target} prefetch={false}>
                <div className="product-image">
                  {/* eslint-disable-next-line */}
                  <img
                    src={item.filename}
                    alt={item.title}
                    className="slider-image"
                  />
                </div>
                {item.content && (
                  <div className="short-description SliderContnt">
                    <div
                      className="std ContSldMaxWdth"
                      dangerouslySetInnerHTML={{ __html: item.content }}
                    ></div>
                  </div>
                )}
              </Link>
            </div>
          ))}
      </Slider>
      <div className="front-stripe-container">
        <div className="front-stripe flex-row content-width justify-center">
          <div className="stripe-item">
            <span className="stripe-icon-wrap">
              <Image
                width={24}
                height={24}
                src="/nextasset/images/1-NoFees_24x24.svg"
                alt={'nofees'}
              />
            </span>
            <p className="desc">No registration or subscription fees</p>
          </div>
          <div className="stripe-item">
            <span className="stripe-icon-wrap">
              <Image
                width={24}
                height={24}
                src="/nextasset/images/2-Order_24x24.svg"
                alt="order"
              />
            </span>
            <p className="desc">No minimum order quantities</p>
          </div>
          <div className="stripe-item">
            <span className="stripe-icon-wrap">
              <Image
                width={24}
                height={24}
                src="/nextasset/images/3-Product_24x24.svg"
                alt="product"
              />
            </span>
            <p className="desc">Over 100,000 products available for resale</p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default BannerCarousel;
